<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
  >
    <el-menu-item index="0">
      <img
          style="width: 100px"
          src="@/assets/ComKey.png"
          alt="Element logo"
      />
    </el-menu-item>
    <el-sub-menu index="1">
      <template #title>Manu</template>
      <el-menu-item index="2-1">分析报告解析</el-menu-item>
      <el-menu-item index="2-2">更多评论</el-menu-item>
      <el-menu-item index="2-3">更多功能</el-menu-item>
    </el-sub-menu>
    <el-menu-item>
      <el-avatar
          :size="32"
          class="mr-3"
          src="https://img.wjwj.top/2024/12/17/9a71ae57ef8edf75b75f8a0878c9a127.png"
      />
      <el-sub-menu index="2">
        <el-menu-item index="2-1">个人中心</el-menu-item>
        <el-menu-item index="2-2">修改密码</el-menu-item>
        <el-menu-item index="2-3">登出</el-menu-item>
      </el-sub-menu>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/stores/token.js'

const activeIndex = ref('1')
const router = useRouter()  // 使用 router 实例

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)

  // 判断是否点击了"登出"项（index="2-3"）
  if (key === '2-3') {
    // 清理用户数据或进行其他登出操作
    // 比如清除本地存储中的用户信息等
    const tokenStore = useTokenStore()
    tokenStore.removeToken()

    // 跳转到登录页面
    router.push('/login')
  }
}
</script>


<style>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>
